<script lang="ts" setup name="GoodsPage">
import { ArrowRight } from '@element-plus/icons-vue'
import { getCategories, getGoodsList, updateFlag } from '@/api/goods'
import type { Goods, GoodsQuery } from '@/types/goods'
import type { TableColumnCtx } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref, computed } from 'vue'
const list = ref<Array<Goods>>([])
const total = ref(0)
const goodsQuery = ref<GoodsQuery>({
  page: 1,
  pageSize: 10,
  proname: '',
  category: '',
  brand: ''
})

// 定义模型数据
const categories = ref<string[]>([])

// 获取分类数据
const getCategoriesData = async () => {
  const res = await getCategories()

  categories.value = res.data.data
}

getCategoriesData()

// 获取商品列表数据
const getGoodsListData = async () => {
  const res = await getGoodsList(goodsQuery.value)
  list.value = res.data.data.items
  total.value = res.data.data.total
}

getGoodsListData()

const clear = () => {
  goodsQuery.value = {
    page: 1,
    pageSize: 10,
    proname: '',
    category: '',
    brand: ''
  }

  getGoodsListData()
}

const formatter = (row: Goods) => {
  return row.proname.length > 30 ? row.proname.substring(0, 30) + '...' : row.proname
}

/**
 *
 * @param value 你筛选的值
 * @param row 这一行的数据
 * @param column 这一列
 */
const filterHandler = (value: string, row: Goods, column: TableColumnCtx<Goods>) => {
  const property = column['property']
  return row[property] === value
}

const changeState = async (
  proid: string,
  type: 'issale' | 'isseckill' | 'isrecommend',
  state: 0 | 1
) => {
  const res = await updateFlag(proid, type, state)
  ElMessage.success(res.data.message)
}

const handleSizeChange = (pageSize: number) => {
  goodsQuery.value.pageSize = pageSize
  getGoodsListData()
}

const handleCurrentChange = (page: number) => {
  goodsQuery.value.page = page
  getGoodsListData()
}

// 商品详情相关
const goods = ref<Goods>()
const dialogVisible = ref(false)
const showDetail = (row: Goods) => {
  goods.value = row
  dialogVisible.value = true
}

// const formatPrice = computed(() => {
//   return goods.value.originprice.toFixed(2)
// })

const formatPrice = (value: number) => {
  return value.toFixed(2)
}
</script>

<template>
  <el-card>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="goodsQuery" style="margin-top: 30px" size="large">
      <el-form-item label="商品名称">
        <el-input v-model="goodsQuery.proname" placeholder="请输入商品名称进行搜索" />
      </el-form-item>
      <el-form-item label="商品分类">
        <el-select v-model="goodsQuery.category" placeholder="请选择商品分类进行搜索">
          <el-option v-for="item in categories" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品品牌">
        <el-input v-model="goodsQuery.brand" placeholder="请输入商品品牌进行搜索" />
      </el-form-item>
      <el-form-item>
        <el-button type="default" @click="clear">清空</el-button>
        <el-button type="primary" @click="getGoodsListData">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 15px">
    <el-table :data="list">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="图片">
        <template #default="{ row }">
          <el-image
            :preview-src-list="[row.img1, row.img2, row.img3, row.img4]"
            :src="row.img1"
            style="width: 100px; height: 80px"
            preview-teleported
          >
            <template #error>
              <img v-error />
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="proname" width="250" :formatter="formatter">
        <!-- <template #default="{ row }">
          <span>{{ row.proname.substr(0, 50) + '...' }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="品牌" prop="brand"></el-table-column>
      <el-table-column
        label="分类"
        prop="category"
        :filters="[
          { text: '家电', value: '家电' },
          { text: '口红', value: '口红' },
          { text: '键盘', value: '键盘' }
        ]"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column label="原价" prop="originprice" sortable></el-table-column>
      <el-table-column label="折扣" prop="discount" sortable></el-table-column>
      <el-table-column label="销量" prop="sales" sortable></el-table-column>
      <el-table-column label="是否售卖">
        <template #default="{ row }">
          <!-- $event 代表change事件更改之后，最新的值 -->
          <el-switch
            v-model="row.issale"
            :active-value="1"
            :inactive-value="0"
            @change="changeState(row.proid, 'issale', $event)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否秒杀">
        <template #default="{ row }">
          <el-switch
            v-model="row.isseckill"
            :active-value="1"
            :inactive-value="0"
            @change="changeState(row.proid, 'isseckill', $event)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否推荐">
        <template #default="{ row }">
          <el-switch
            v-model="row.isrecommend"
            :active-value="1"
            :inactive-value="0"
            @change="changeState(row.proid, 'isrecommend', $event)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="primary" @click="showDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="goodsQuery.page"
      v-model:page-size="goodsQuery.pageSize"
      :page-sizes="[10, 20, 70]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <el-dialog v-model="dialogVisible" fullscreen title="商品详情" center>
    <div style="width: 1000px; margin: 0 auto">
      <!-- 轮播图 -->
      <el-carousel height="600px">
        <el-carousel-item v-for="item in goods.banners[0].split(',')" :key="item">
          <el-image style="width: 1000px" :src="item" />
        </el-carousel-item>
      </el-carousel>
      <h3>{{ goods.proname }}</h3>
      <h4>品牌：{{ goods.brand }}</h4>
      <h4>分类：{{ goods.category }}</h4>
      <!-- <h4>
        价格：<span style="color: red">￥{{ goods.originprice }}</span>
      </h4> -->
      <!-- <h4>
        价格：<span style="color: red">￥{{ formatPrice }}</span>
      </h4> -->
      <h4>
        价格：<span style="color: red">￥{{ formatPrice(goods.originprice) }}</span>
      </h4>
      <h4>销量：{{ goods.sales }}</h4>
      <h4>是否售卖：{{ goods.issale === 1 ? '是' : '否' }}</h4>
      <h4>是否秒杀：{{ goods.isseckill === 1 ? '是' : '否' }}</h4>
      <h4>是否推荐：{{ goods.isrecommend === 1 ? '是' : '否' }}</h4>
      <h4>{{ goods.desc }}</h4>
      <h4>图文详情：</h4>
      <div><el-image :src="goods.img1"></el-image></div>
      <div><el-image :src="goods.img2"></el-image></div>
      <div><el-image :src="goods.img3"></el-image></div>
      <div><el-image :src="goods.img4"></el-image></div>
    </div>
    <template #footer>
      <el-button type="default" @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
</style>
